<template>
	<view class="">
		<view class="content">
			<view class="title">循环滚动列表，支持小程序、h5、app</view>
			<view class="titlea">支持slot自定义内容</view>
			<view class="scroll_list">
				<scrollList :list="goods_list" :height='1000'>
					<template #default="{rows}">
						<view class="rows">
							<image class="rows_img" :src="rows.img" mode=""></image>
							<view class="rows_name">{{rows.name}}</view>
							<view class="rows_time">{{rows.time}}</view>
						</view>
					</template>
				</scrollList>
			</view>
		</view>
	</view>
</template>

<script>
	import scrollList from '@/components/zh-scrollList/scrollList/scrollList'
	export default {
		components: {
			scrollList
		},
		data() {
			return {
				goods_list: [{
						id: 1,
						name: '用户1(支持图片或自定义内容滚动啦)',
						time: '54分钟前',
						img: 'https://cdn.uviewui.com/uview/album/1.jpg'
					},
					{
						id: 2,
						name: '用户2(支持图片或自定义内容滚动啦)',
						time: '54分钟前',
						img: 'https://cdn.uviewui.com/uview/album/2.jpg'
					}, {
						id: 3,
						name: '用户3(支持图片或自定义内容滚动啦)',
						time: '54分钟前',
						img: 'https://cdn.uviewui.com/uview/album/3.jpg'
					}, {
						id: 4,
						name: '用户4(支持图片或自定义内容滚动啦)',
						time: '54分钟前',
						img: 'https://cdn.uviewui.com/uview/album/4.jpg'
					}, {
						id: 5,
						name: '用户5(支持图片或自定义内容滚动啦)',
						time: '54分钟前',
						img: 'https://cdn.uviewui.com/uview/album/5.jpg'
					}, {
						id: 6,
						name: '用户6(支持图片或自定义内容滚动啦)',
						time: '54分钟前',
						img: 'https://cdn.uviewui.com/uview/album/6.jpg'
					}, {
						id: 7,
						name: '用户7(支持图片或自定义内容滚动啦)',
						time: '54分钟前',
						img: 'https://cdn.uviewui.com/uview/album/1.jpg'
					}, {
						id: 8,
						name: '用户8(支持图片或自定义内容滚动啦)',
						time: '54分钟前',
						img: 'https://cdn.uviewui.com/uview/album/2.jpg'
					}, {
						id: 9,
						name: '用户9(支持图片或自定义内容滚动啦)',
						time: '54分钟前',
						img: 'https://cdn.uviewui.com/uview/album/3.jpg'
					}, {
						id: 10,
						name: '用户10(支持图片或自定义内容滚动啦)',
						time: '54分钟前',
						img: 'https://cdn.uviewui.com/uview/album/4.jpg'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {

		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 12upx;

		.title {
			text-align: center;
			margin-bottom: 10upx;
			font-size: 30upx;
			color: #333;
			font-weight: bold;
		}

		.titlea {
			text-align: center;
			margin-bottom: 20upx;
			font-size: 26upx;
			color: #333;
			font-weight: bold;
		}

		.scroll_list {
			padding: 0 24upx;

			.rows {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 30rpx;


				.rows_img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}

				.rows_name {
					font-size: 26rpx;
					font-weight: 600;
					color: #333;
				}

				.rows_time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
</style>